<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/static/common/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="/static/common/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="/static/admin/css/admin.css"  media="all">
  <!-- 图片上传 -->
  <link href="/static/common/fileinput/bootstrap/bootstrap.min.css" rel="stylesheet">
  <link href="/static/common/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
  <!-- 图片上传 -->
</head>
<body style="padding:10px;">
  <div class="tplay-body-div">
    <div class="layui-tab">
      <ul class="layui-tab-title">
        <li class="a_menu"><a href="{:url('attachment/lst')}">附件管理</a></li>
        <li><a href="{:url('attachment/uploads')}" class="layui-this">压缩文件多图上传</a></li>
      </ul>
    </div> 
    <div style="margin-top: 20px;">
    </div>
    <div class="layui-upload" id="upload-thumb">
      <label class="layui-form-label">文件</label>
      <input type="button" class="layui-btn" value="上传文件" id="test">
      <div class="layui-upload-list">
        <p id="demoText"></p>
      </div>
    </div>
    <!-- 多图上传 -->
    <div class="form-group layui-upload">
      <label class="control-label layui-form-label" >图片</label>
      <input type="button" value="多图上传" class="layui-btn" id="buttonShow" onclick="upliadfileshow();return false;">
      <!-- <div id="formimageshow" class="formControls col-xs-2 col-sm-2" >
        <label for="checkbox-1">最多支持4张轮播图</label>
      </div> -->
    </div>

    <!-- 图片上传 -->
    <div id="modal-webuploader" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
      <div class="modal-dialog" style="width:660px;">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button"  id="close" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <ul class="nav nav-pills" role="tablist">
              <li id="li_upload" class="active" role="presentation"><a href="#upload" aria-controls="upload" role="tab" data-toggle="tab" onclick="$('#select').hide();" >上传图片</a></li>
              <!-- <li id="li_network" class="" role="presentation"><a href="#network" aria-controls="network" role="tab" data-toggle="tab" onclick="$('#select').hide();">提取网络图片</a></li> -->
            </ul>
            <div class="modal-body tab-content">
              <div role="tabpanel" class="tab-pane network" id="network">
              </div>
              <div role="tabpanel" class="tab-pane upload active" id="upload">
                <div id="uploader" class="uploader">
                  <form enctype="multipart/form-data">
                    <input id="file-0" class="file" type="file" multiple data-min-file-count="1">
                    <br>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片上传 -->

    <script src="/static/common/layui/layui.js"></script>
    <script src="/static/common/jquery/jquery.min.js"></script>
    <!-- 多图上传 -->
    <script src="/static/common/fileinput/js/fileinput.js" type="text/javascript"></script>
    <script src="/static/common/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
    <script src="/static/common/fileinput/bootstrap/bootstrap.min.js" type="text/javascript"></script>
    <!-- 多图上传 -->
    <script>
        var message;
        layui.config({
            base: '/static/admin/js/',
            version: '1.0.1'
        }).use(['app', 'message'], function() {
            var app = layui.app,
                $ = layui.jquery,
                layer = layui.layer;
            //将message设置为全局以便子页面调用
            message = layui.message;
            //主入口
            app.set({
                type: 'iframe'
            }).init();
        });
    </script> 
    <script> 
      layui.use('upload', function(){
        var $ = layui.jquery
        ,upload = layui.upload;
        //指定允许上传的文件类型
        upload.render({
          elem: '#test'
          ,url: "{:url('common/upload')}"
          ,accept: 'file' //普通文件
          ,exts: 'zip|rar|7z' //只允许上传压缩文件
          ,done: function(res){
            layer.msg("上传成功");
            if(res.code == 2) {
              setTimeout(function(){
                location.href = "{:url('attachment/lst')}";
              },1500)
            }
          }
        }); 
      });
    </script>
    <script type="text/javascript">
      // 图片上传
      function upliadfileshow(){
        $("#modal-webuploader").fadeIn();
        $("#modal-webuploader").fadeIn('slow');
      
      }
      
      $("#close").click(function(){
        $("#modal-webuploader").fadeIn();
        $("#modal-webuploader").fadeOut('slow');
      })
      
      
      function deleteImage(id){
        $.ajax({
           url:'{:url("attachment/del_images")}',
           type:'get',
           data:{id:id},
           dataType:'json',
           success:function(data){
              if(data==1){
                $('#imageDelete'+id).remove();
                var imagepath=$('input[class=imagepath]');
                  if(imagepath.length<4){
      
                    $('#buttonShow').removeAttr("disabled");
                  }else{
      
                  }
              }else{
                 alert('删除失败');
              }
            }
      
        })
      
      }

      //图片上传
    initFileInput("file-0", "{:url('attachment/uploads')}");

     
      //初始化fileinput控件（第一次初始化）
      function initFileInput(ctrlName, uploadUrl) {
          var control = $('#' + ctrlName);
          control.fileinput({
              language: 'zh', //设置语言
              uploadUrl: uploadUrl, //上传的地址
              allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后缀
              showUpload: true, //是否显示上传按钮
              showCaption: true,//是否显示标题
              showPreview:true,//是否显示文件的预览图。默认值true。
              showRemove:true,//是否显示删除/清空按钮。默认值true。
              browseClass: "btn btn-primary", //按钮样式
              previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
              maxFileCount: 4,//表示允许同时上传的最大文件个数
              dropZoneEnabled:true,//是否显示拖拽区域
      
              initialPreviewConfig: 	{
                caption: ctrlName,
                width: '120px',
                url: uploadUrl,
                key: 101,
                success: function() {
                  
                }
            }
          });
      }
        $("#file-0").on("fileuploaded", function (event, data, previewId, index) {
      
    
          var div=$('<div class="input-group " id="imageDelete'+data.response['id']+'" style="margin-top:.5em;margin-right:2em; float:left;"><input type="hidden" name="imagepath[]" class="imagepath" value="'+data.response['id']+'"/><img src="'+data.response['imagepath']+'"; class="img-responsive img-thumbnail" width="150"><a class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="deleteImage('+data.response['id']+')">×</a></div>');
          $('#formimageshow').after(div);
              var imagepath=$('input[class=imagepath]');
                if(imagepath.length>=4){
                  $('#buttonShow').attr("disabled","disabled");//禁用上传按钮
                  $("#modal-webuploader").fadeIn();//关闭上传
              $("#modal-webuploader").fadeOut('slow');
                }else{
      
                }
       });
    
      </script>
  </div>
</body>
</html>